<template>
  <view class="viewport">
    <view class="contant" :style="{ paddingTop: safeAreaInsets!.top + 'px'}">
      <text class="iconfont icon-cuowu" @tap="Back"></text>

      <view class="contant-item">
        <!-- 图片 -->
        <view class="logo">
          <image src="../../static/images/news-logo.png" />
        </view>
        <!-- 一段文字 -->
        <view class="sentences">
          <view class="h2">Welcome</view>
          <text class="h2-item">the world is wonderful!</text>
        </view>
        <!-- 表单 -->
        <uni-forms :rules="rules" :model="form" ref="formRef">
          <view class="form">
            <!-- 邮箱 -->
            <uni-forms-item name="account">
              <view class="form-item">
                <view class="T"> <text class="iconfont icon-shouji"></text></view>
                <view class="item-input">
                  <input
                    v-model="form.account"
                    placeholder="请输入邮箱"
                    placeholder-class="input-placeholder"
                  />
                </view>
              </view>
            </uni-forms-item>
            <!-- 验证码 -->
            <uni-forms-item name="code">
              <view class="code-item">
                <view class="code_input">
                  <view class="V"> <text class="iconfont icon-yanzhengyanzhengma"></text></view>
                  <view class="input-code">
                    <input
                      v-model="form.code"
                      placeholder="验证码"
                      placeholder-class="input-placeholder"
                    />
                  </view>
                </view>
                <button class="send" @tap="send" :disabled="isDisable">
                  {{ isDisable ? `${second}s` : '发送' }}
                </button>
              </view>
            </uni-forms-item>
            <!-- 密码 -->
            <uni-forms-item name="password">
              <view class="form-item">
                <view class="T"> <text class="iconfont icon-mima"></text></view>
                <view class="item-input">
                  <input
                    :password="true"
                    placeholder="请输入密码"
                    placeholder-class="input-placeholder"
                    v-model="form.password"
                  />
                </view>
              </view>
            </uni-forms-item>
            <uni-forms-item name="checkpassword">
              <!-- 确认密码 -->
              <view class="form-item">
                <view class="T"> <text class="iconfont icon-mima"></text></view>
                <view class="item-input">
                  <input
                    :password="true"
                    placeholder="确认密码"
                    placeholder-class="input-placeholder"
                    v-model="form.checkpassword"
                  />
                </view>
              </view>
            </uni-forms-item>
          </view>
        </uni-forms>
        <!-- 按钮 -->
        <button class="button" :class="{ disable: isDisable }" @tap="register">立即注册</button>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { SendCodeAPI, registerAPI } from '@/services/register'
// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()

//表单
const form = ref({
  account: '',
  code: '',
  password: '',
  checkpassword: '',
})
//校验规则
const rules: UniHelper.UniFormsRules = {
  account: {
    rules: [
      { required: true, errorMessage: '请输入邮箱' },
      { pattern: /^\d{5,12}@qq\.com$/, errorMessage: 'QQ邮箱格式不正确' },
    ],
  },
  code: {
    rules: [{ required: true, errorMessage: '请输入验证码' }],
  },
  password: {
    rules: [{ required: true, errorMessage: '请输入密码' }],
  },
  checkpassword: {
    rules: [{ required: true, errorMessage: '请再次输入密码' }],
  },
}
//点击发送密码
let isDisable = ref(false)
let second = ref(60)
const send = async () => {
  if (form.value.account == '') {
    uni.showToast({ icon: 'error', title: '请输入邮箱' })
    return
  }

  try {
    //发送验证码
    const res = await SendCodeAPI(form.value.account)
    showTime()
  } catch (error) {}
}
//倒计时
const showTime = async () => {
  isDisable.value = true
  const time = setInterval(() => {
    second.value--
    if (second.value == 0) {
      second.value = 60
      isDisable.value = false
      clearInterval(time)
    }
  }, 1000)
}
// 获取表单组件实例，用于调用表单方法
const formRef = ref<UniHelper.UniFormsInstance>()
//点击注册
const register = async () => {
  try {
    await formRef.value?.validate?.()
    if (form.value.password != form.value.checkpassword) {
      uni.showToast({ icon: 'error', title: '两次密码不一致' })
      return
    }
    const res = await registerAPI({
      account: form.value.account,
      code: form.value.code,
      password: form.value.password,
      rePassword: form.value.checkpassword,
    })
    if (res.code == 200) {
      uni.showToast({ icon: 'none', title: '注册成功' })
      setTimeout(() => {
        uni.navigateTo({ url: '/pages/login/login' })
      }, 500)
    }
  } catch (error) {
    console.log(error)
    // if(error.data.msg)
    // {
    //   uni.showToast({ icon: 'error', title: error.data.msg })
    // }
    // else{
    //   uni.showToast({ icon: 'error', title: '请填写完整信息' })
    // }
  }
}
//点击返回
const Back = () => {
  uni.navigateBack({ delta: 1, animationType: 'pop-out' })
}
</script>

<style lang="scss">
page {
  height: 100%;
}
.viewport::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201803%2F02%2F20180302123411_wcanq.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1700917350&t=ed5a3d35c0a5a1bc33d2a4059765849a);
  background-size: 100% 100%;
  filter: blur(3px);
  z-index: -1;
  background-size: cover;
}
.viewport {
  height: 100%;

  position: relative;
  .contant {
    height: 100%;
    width: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    .icon-cuowu,
    .icon-shezhi {
      position: absolute;
      top: 100rpx;
      color: #fff;
      font-size: 30rpx;
      font-weight: 600;
    }
    .icon-cuowu {
      left: 40rpx;
    }
    .icon-shezhi {
      right: 30rpx;
    }
  }
}
.contant-item {
  width: 600rpx;
  height: 1000rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .logo {
    height: 200rpx;
    width: 200rpx;
    border-radius: 200rpx;
    overflow: hidden;

    image {
      height: 100%;
      width: 100%;
    }
  }
  .sentences {
    height: 200rpx;
    .h2 {
      text-align: center;
      font-size: 60rpx;
      color: #fff;
      margin-bottom: 10rpx;
      font-weight: bold;
    }
    .h2-item {
      font-size: 28rpx;
      font-weight: 100;
      color: #fff;
    }
  }
  .form {
    width: 100%;
    height: 500rpx;
    .form-item {
      height: 70rpx;
      width: 100%;
      // background-color: #c1c5d5;
      border-bottom: 1px solid #ccc;
      display: flex;
      opacity: 0.7;
      padding: 10rpx;
      // margin-bottom: 50rpx;
      .T {
        height: 50rpx;
        width: 70rpx;
        text-align: center;
        // box-sizing: border-box;
        border-right: solid #fff;
        .icon-shouji,
        .icon-mima {
          line-height: 50rpx;
          font-size: 40rpx;
          color: #fff;
        }
      }
      .item-input {
        flex: 1;
        margin-left: 20rpx;
        color: #fff;

        input {
          height: 100%;
          font-size: 32rpx;
          .input-placeholder {
            color: #fff;
          }
        }
      }
    }
    .code-item {
      height: 70rpx;
      width: 100%;
      display: flex;
      opacity: 0.7;
      // margin-bottom: 20rpx;
      justify-content: space-between;
      .code_input {
        height: 70rpx;
        width: 300rpx;
        border-bottom: 1px solid #ccc;
        display: flex;
        padding: 10rpx;
        .V {
          height: 50rpx;
          width: 70rpx;
          text-align: center;
          border-right: solid #fff;
          .icon-yanzhengyanzhengma {
            line-height: 50rpx;
            font-size: 40rpx;
            color: #fff;
          }
        }
        .input-code {
          flex: 1;
          flex: 1;
          margin-left: 20rpx;
          color: #fff;

          input {
            height: 100%;
            font-size: 32rpx;
            .input-placeholder {
              color: #fff;
            }
          }
        }
      }
      .send {
        background-color: #fe0000;
        height: 70rpx;
        width: 150rpx;
        color: #fff;
        font-size: 32rpx;
        line-height: 70rpx;
        text-align: center;
        font-weight: bold;
      }
    }
  }
  .button {
    width: 100%;
    height: 80rpx;
    background-color: #eb3234;
    color: #fff;
    line-height: 80rpx;
    text-align: center;
    font-weight: bold;
  }
  .disable {
    background-color: rgb(22, 20, 20) 234;
  }
}
.uni-forms {
  width: 100%;
}
</style>